<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>画线2</title>
    <style>
      body, html,
      #container {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>

    <script type="text/javascript" src="../js/three.js"></script>
    <script type="module">
      /**
       * 源码：https://github.com/mrdoob/three.js/blob/master/examples/webgl_buffergeometry_lines.html
       * 效果：https://threejs.org/examples/#webgl_buffergeometry_lines
       * */
      import { createBaseObj, getStats } from '../js/myThree.js'

      const container = document.getElementById('container')
      const oWidth = container.clientWidth
      const oHeight = container.clientHeight

      const { scene, camera, renderer } = createBaseObj(oWidth / oHeight)
      const clock = new THREE.Clock()
      const stats = getStats()

      const segments = 10000;
			const r = 800;
			let t = 0;
      let line;

      init()
      animation()

      function init() {
        camera.far = 4000
        camera.position.z = 2750

        const geometry = new THREE.BufferGeometry()
        const material = new THREE.LineBasicMaterial({ vertexColors: true })

        const positions = []
        const colors = []

        // 建立形状矩阵与颜色矩阵
        for (let i = 0; i < segments; i++) {
          const x = Math.random() * r - r / 2
          const y = Math.random() * r - r / 2
          const z = Math.random() * r - r / 2

          // positions

          positions.push(x, y, z)

          // colors

          colors.push(x / r + 0.5)
          colors.push(y / r + 0.5)
          colors.push(z / r + 0.5)
        }

        geometry.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3))
        geometry.setAttribute('color', new THREE.Float32BufferAttribute(colors, 3))
        console.log(geometry)
        generateMorphTargets(geometry)

        geometry.computeBoundingSphere()

        console.log(2, line, geometry)

        line = new THREE.Line(geometry, material)
        scene.add(line)

        console.log(3, line, geometry, scene)

        renderer.setPixelRatio( window.devicePixelRatio )
        renderer.setSize(oWidth, oHeight)
        renderer.outputEncoding = THREE.sRGBEncoding

        container.appendChild(renderer.domElement)

        //

        container.appendChild(stats.dom)

        window.addEventListener('resize', onWindowResize)
      }

      function onWindowResize() {
        camera.aspet = window.innerWidth / window.innerHeight
        camera.updateProjectionMatrix()

        renderer.setSize(window.innerWidth, window.innerHeight)
      }

      function animation () {
        requestAnimationFrame(animation)
        render()
        stats.update()
      }

      function render () {
        // const delta = clock.getDelta()
        // const time = clock.getElapsedTime()

        // line.rotation.x = time * 0.25
        // line.rotation.y = time * 0.5

        // t += delta * 0.5
        // console.log(line)
        line.morphTargetInfluences[0] = Math.abs(Math.sin(t))

        renderer.render(scene, camera)
      }

      function generateMorphTargets (geometry) {
        const data = []

        for(let i = 0; i < segments; i ++) {
          const x = Math.random() * r - r / 2
          const y = Math.random() * r - r / 2
          const z = Math.random() * r - r / 2

          data.push(x,y,z)
        }

        const morphTarget = new THREE.Float32BufferAttribute(data, 3)
        morphTarget.name = 'target1'
        console.log(1231, morphTarget)

        geometry.morphAttributes.position = [ morphTarget ]
      }
    </script>
  </body>
</html>
